// 预订疫苗界面，展示医疗点可用疫苗数量，并可以点击预约
<template>
    <!-- TODO -->
    <el-table v-loading="loading" :data="vaccines" :default-sort="{ prop: 'number', order: 'descending' }"
        height="650px">
        <el-table-column prop="name" sortable label="机构" />
        <el-table-column prop="number" sortable label="可用疫苗数量" />
        <el-table-column prop="address" label="地址" />
        <el-table-column prop="phone" label="电话" />
        <el-table-column label="操作">
            <template v-slot="scope">
                <el-button type="danger" @click="bookVaccine(scope.row.name)">添加预约</el-button>
            </template>
        </el-table-column>
    </el-table>
</template>

<script>
import { Request } from '../../utils/request'
import { ElMessage } from 'element-plus'
export default {
    name: 'VaccineBook',
    // TODO
    data() {
        return {
            vaccines: {
                name: '浙江大学附属第一医院',
                number: 114514,
                address: '79 Qingchun Rd, Shangcheng District, Hangzhou, Zhejiang, China, 310006',
                phone: '(0571)87236114 '
            },
            loading: false
        };
    },
    created() {
        //this.reload()
    },
    methods: {
        // TODO: fix api
        reload() {
            this.loading = true
            Request({
                url: '/nucleic-acid-test',
                method: 'get'
            }).then(res => {
                this.nucleics = res.record_list
                this.loading = false
                console.log(this.loading)
            })
        },
        bookVaccine(name) {
            // TODO: fix api
            Request({
                url: '/nucleic-acid-add',
                method: 'post',
                data: { username: name }
            }).then(res => {
                if (res === 'success') {
                    ElMessage({
                        message: '预约成功',
                        type: 'success'
                    })
                    this.reload()
                }
                else {
                    ElMessage({
                        message: '错误：' + res,
                        type: 'error'
                    })
                }
            })
        }
    }
}
</script>